<template>
    <div class="testPaper">
        <!--导航-->
        <nav>
          <div @click="back">
             <van-icon name="arrow-left"/>
          </div>
          <div>
             套卷练习
           </div>
           <div @click="()=>{this.$router.push('/search')}">
              <van-icon name="search" />
           </div>
        </nav>

        <!--选择-->
        <div class="select">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1">
                    <div class="box">
                        <van-sidebar v-model="activeKey" @change="OnClick">
                            <van-sidebar-item v-for="(item,index) in About " :key="index" :title="item.name" />
                        </van-sidebar>
                        <div class="bos" >{{bout}}</div>
                    </div>
                </van-dropdown-item>
                <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
        </div>
        <!-- 空状态 -->
        <div class="wrap">
            <img src="../../../public/img/empty.0d284c2e.png" alt="">

        </div>
        <p>请稍后，套卷正在赶来的路上啦</p>

    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "TestPaper",
      data() {
        return {
            activeKey: 0,
            value1: 0,
            value2: "a",
            option1: [{ text: "套卷分类", value: 0 }],
            option2: [
                { text: "全部", value: "a" },
                { text: "已做", value: "b" },
                { text: "未做", value: "c" },
            ],
            About: [],
            bout: '',
        };
    },
        created(){
            axios.get("http://localhost:8080/testPaper.json").then((res) => {
                this.About=[...res.data.data.users];
            });
        },
        methods:{
            //回退
            back(){
                window.history.back()
            },
            OnClick() {
                this.bout=this.About[this.activeKey].cname.name_z;
            },
        }
    }
</script>

<style scoped lang="scss">
    @mixin flexStyle{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
.testPaper{
    width: 100%;
    background: white;
    height: 100vh;
    nav{
        @include flexStyle;
       font-size: 4.8vw;
        height: 11.7vw;
        position: fixed;
        top: 0;
        z-index: 999;
        background: #fff;
        .van-icon{
            font-size: 6vw;
            color: #2c3e50;
        }
    }

    .select{
        width: 100%;
        margin-top: 11.7vw;
        /deep/.van-dropdown-menu__title{
            font-size: 4vw;
            line-height: 6vw;
        }
        /deep/.van-dropdown-menu__bar{
            height: 9.4vw;
        }
        /deep/.van-cell{
           /*position: fixed;*/
           /* top: 10vw;*/
        }
        /deep/.van-sidebar{
            width: 30vw;
        }
        /deep/.van-sidebar-item{
            font-size: 4vw;
            line-height: 8.6vw;
            text-align: center;
        }
        /deep/.van-sidebar-item--select::before {
             height: 7.13333vw;

         }
        /deep/.van-cell{
            font-size: 3.8vw;
            height: 10vw;
        }
    }
    .box{
        display: flex;
    }
    .bos{
       font-size: 4.5vw;
    }

    .wrap{
        width: 100%;
        display: flex;
        justify-content: center;
        img{
            width: 50%;
        }
    }
    p{
        font-size: 4.6vw;
        margin-top: 2vw;
        color: #b7b7b7;
        text-align: center;
    }
}
</style>